<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ include file="/WEB-INF/tiles2/common.jsp" %>
<div class="modal fade" id="pensionmodal" role="dialog">
	<div class="modal-dialog modal-lg">
	    <div class="modal-content">
			<div class="modal-header">			
				<h4 class="modal-title tcenter">
					<strong>해넘이숲속펜션</strong>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="glyphicon glyphicon-remove"></span>
					</button>
				</h4>
				<nav class="navbar navbar-default subnav dragdown" role="navigation">
					<div class="container-fluid">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
							<button type="button" class="navbar-toggle"	data-toggle="collapse"
								data-target="#penmodalmn">
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>							
						</div>
						<div class="collapse navbar-collapse" id="penmodalmn">
							<ul class="nav navbar-nav">
								<li class="dropdown active">
									<a href="#" class="dropdown-toggle"	data-toggle="dropdown">
									펜션<b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a id="introduce-btn">펜션소개</a></li>
									<li><a id="photo-btn">사진</a></li>
									<li><a id="acc-btn">부대시설</a></li>
									<li class="divider"></li>
									<li><a id="map-btn">찾아가는 길</a></li>
									<li class="divider"></li>
									<li><a id="penhelp-btn">이용 / 취소 안내</a></li>
								</ul></li>
								<li><a id="roominfo-btn">객실안내</a></li>
								<li><a id="area-btn">주변관광지</a></li>
								<li><a id="penqna-btn">Q&amp;A</a></li>
								<li><a id="penreview-btn">이용후기</a></li>								
							</ul>
							<ul class="nav navbar-nav navbar-right">
								<li>
									<span id="reserv-btn" class="btn btn-danger penmobtn">
										<span class="glyphicon glyphicon-calendar"></span>
										&nbsp;예약하기
									</span>
								</li>
								<li>
									<span id="zzim-btn" class="btn btn-warning penmobtn">
										<span class="glyphicon glyphicon-heart"></span>
										&nbsp;찜하기
									</span>
								</li>
							</ul>
						</div>
						<!-- /.navbar-collapse -->
					</div>
					<!-- /.container-fluid -->
				</nav>
			</div>
			<div class="modal-body modalbody">					
				<div class="penmodal">
					
				</div>
			</div>
			<div class="modal-footer tcenter">
			</div>
		</div>
	</div>
</div>
<script>
function inputpno(pno){
	$("#pnohidden").val(pno);
}
</script>
<script>
$("#pensionmodal").on('show.bs.modal', function(e){displayContents("introduce", $("#pnohidden").val());});
$("#introduce-btn").click(function(){displayIntroduce("introduce", $("#pnohidden").val());});
$("#photo-btn").click(function(){displayIntroduce("photo", $("#pnohidden").val());});
$("#acc-btn").click(function(){displayIntroduce("acc", $("#pnohidden").val());});
$("#map-btn").click(function(){displayIntroduce("map", $("#pnohidden").val());});
$("#penhelp-btn").click(function(){displayIntroduce("penhelp", $("#pnohidden").val());});
$("#roominfo-btn").click(function(){displayContents("roominfo", $("#pnohidden").val());});
$("#area-btn").click(function(){displayContents("area", $("#pnohidden").val());});
$("#penqna-btn").click(function(){displayContents("penqna", $("#pnohidden").val());});
$("#penreview-btn").click(function(){displayContents("penreview", $("#pnohidden").val());});
$("#reserv-btn").click(function(){displayContents("reserv", $("#pnohidden").val());});
$("#zzim-btn").click(function(){displayContents("zzim", $("#pnohidden").val());});

function displayContents(id, pno) {
	$(".penmodal *").remove();
	var reqAjax = $.ajax({
		type: 'GET',
		url: "<c:url value='/pension/modal/"+id+".pen' />",
		data: {pno: pno, id: id}
	});
	reqAjax.done(function(result){			
		$(".penmodal").html(result);
	});
	reqAjax.fail(function(xhr, status, err){
		alert(status + "/" + err);
	});
}
function displayIntroduce(id, pno) {
	$(".penmodal *").remove();
	var reqAjax = $.ajax({
		type: 'GET',
		url: "<c:url value='/pension/modal/introduce.pen' />",
		data: {pno: pno, id: id}
	});
	reqAjax.done(function(result){			
		$(".penmodal").html(result);
	});
	reqAjax.fail(function(xhr, status, err){
		alert(status + "/" + err);
	});
}
</script>